<template>
<div>
  <!-- 学生信息表 -->
  <el-table v-loading="loadShow" :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="编号" prop="lecId">
    </el-table-column>
    <el-table-column sortable label="标题" prop="lecName">
    </el-table-column>
    <el-table-column sortable label="时长(H)" prop="lecHour" width="100">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"  size="small">移除</el-button>
        <el-button type="text"  @click="handleClick(scope.$index,scope.row),editDialogVisible = true" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog title="修改信息"  :visible.sync="editDialogVisible">
    <el-form  :model="formData" status-icon ref="formData" label-width="80px">
      <el-form-item label="编号">
        <el-input type="text" :maxlength="20" size="large" v-model="formData.lecId" disabled> </el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input type="text" :maxlength="20" size="large" v-model="formData.lecName"> </el-input>
      </el-form-item>
      <el-form-item label="主讲人">
        <el-input type="text" v-model="formData.lecAuthor" size="large" :maxlength="20"> </el-input>
      </el-form-item >
      <el-form-item label="时长">
        <el-input type="number" v-model="formData.lecHour" size="large" :maxlength="20"> </el-input>
      </el-form-item >
      <el-form-item label="详情介绍">
        <el-input type="textarea" :rows="5" :maxlength="11" size="large" v-model="formData.lecDetail" > </el-input>
      </el-form-item>  
      <el-form-item>
        <el-button type="primary" @click="updateForm()">提交</el-button>
        <el-button @click="resetForm('formData'),editDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <el-dialog title="添加讲座" :visible.sync="regDialogVisible">
    <el-form  :model="regForm" status-icon :rules="regRules" ref="regForm">
      <el-form-item prop="lecName">
        <el-input type="text" placeholder="标题" :maxlength="20" size="large" v-model="regForm.lecName" > </el-input>
      </el-form-item>
      <el-form-item prop="lecAuthor">
        <el-input placeholder="主讲人" type="text" v-model="regForm.lecAuthor" size="large" :maxlength="20"> </el-input>
      </el-form-item >

      <el-form-item prop="lecHour">
        <el-select v-model="regForm.lecHour" placeholder="时长" style="width:100%;">
          <el-option label="1小时" value="1"></el-option>
          <el-option label="2小时" value="2"></el-option>
          <el-option label="3小时" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="lecDetail">
        <el-input type="textarea" :rows="5" placeholder="详情介绍：" :maxlength="11" size="large" v-model="regForm.lecDetail" > </el-input>
      </el-form-item>
      <el-form-item style="width:100%;" class="login-btn">
        <el-button type="primary" size="large" style="width:100%;" @click.native.prevent="regSubmit" :loading="logining">{{regText}}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

    <div class="pager">
      <el-pagination layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
      </el-pagination>      
    </div>

    <div style="text-align:right">
      <i class="el-icon-circle-plus add" @click="regDialogVisible = true"></i>
    </div>

  </div>
</template>


<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入！'))
        } else {
          callback();
        }
      }
      return {
        logining: false,
        loadShow: true,
        regText: '添加',
        regDialogVisible: false,
        regForm:{
          lecId:'',
          lecAuthor:'',
          lecName:'',
          lecDetail:'',
          lecHour:''
        },
        regRules:{
          lecAuthor: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          lecName: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          lecDetail: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          lecHour: [
            { required: true, message: '请选择时长！', trigger: 'change' }
          ]
        },
        editDialogVisible: false,
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        formData:{},
        tableData: [],
        page: 1,
        currentPage: 1,
        totalCount: 0
      }
    },
    created(){
      this.getData(this.page)
      setTimeout(() => {
        this.loadShow = false
      },500)
    },
    methods: {
      getData(page){
        var _this = this
        this.$ajax.get('/api/getLectures?id=0&page=' + (page-1)).then(function(response){
          _this.tableData = response.data.data.content
          _this.totalCount = response.data.data.totalElements
        }).catch(function(error){console.log(error);}); 
      },
      handleCurrentChange(val) {
        this.getData(val)
      },
      regSubmit(){
        var _this = this;
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            _this.logining = true;
            _this.regText = "Wait...";
            this.$ajax.post('/api/addLecture',
              _this.regForm
              ).then(function(response){
                  if(0==response.data.code){
                    _this.regText = "注册...";
                    setTimeout(function () {
                      _this.logining = false;
                      _this.$message({message: response.data.data,type: 'success'});
                      _this.$refs['regForm'].resetFields();
                      _this.getData(_this.page)
                    }, 1200);
                  }else if(1==response.data.code){
                    _this.$message({message: response.data.msg,type: 'error'});
                  }
                  setTimeout(() => {
                    _this.logining = false;
                    _this.regText = "注册";
                    _this.regDialogVisible = false
                   }, 900);
              }).catch(function(error){console.log(error);}); 
          } else {
            return false;
          }
        })
      },
      deleteRow(index, rows) {
        var _this=this
        this.$ajax.get('/api/delLecture?lecId='+rows[index].lecId).then(function(response){
          _this.$message({message: "讲座删除成功！", type: 'success'});
          setTimeout(function () {
            _this.getData(_this.page)
          }, 200);
        }).catch(function(error){
          _this.$message({message: "讲座删除失败！", type: 'error'});
          console.log(error);}); 
        rows.splice(index, 1);
      },
      handleClick(index,row) {
        this.formData=row
      },
      updateForm() {
        var _this = this;
        this.$ajax.post('/api/updateLecture',
          _this.formData
          ).then(function(response){
            if(0==response.data.code){
              setTimeout(function () {
                _this.$message({message: response.data.data, type: 'success'});
              }, 500);
            }else if(1==response.data.code){
              _this.$message({message: response.data.msg, type: 'error'});
            }
            setTimeout(() => {
              _this.editDialogVisible = false
             }, 200);
          }).catch(function(error){console.log(error);})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>



<style scoped>
.pager{margin-top:35px;text-align:center;}
.add{position: relative;font-size: 48px;
text-shadow: 2px 2px 2px #B9D3EE;color:	#87caEB;
top: -40px;right: 18px;margin-bottom: 30px}
.add:hover{color:	#a7dEEB;}
@media (max-width: 480px){
.add{font-size: 42px;right: 6px;top:0;margin-bottom: 43px;}
}
</style>